<template>
    <div class='container'>
        <el-dialog
            title="预览文章"
            :visible="value"
            width="50%"
            @close="handleClose"
        >
            <div>
                <h2 style="margin:0">{{currentArticle.title}}</h2>
                <p>
                    <span>{{currentArticle.createTime | parseTimeByString("{y}-{m}-{d} {h}:{m}:{s}")}}</span>
                    <span>{{currentArticle.username}}</span>
                    <span>
                        <i class="el-icon-view"></i>
                        {{currentArticle.visits}}
                    </span>
                </p>
                <el-row>
                    <el-col :span="24">
                        <div
                            class="articleBody"
                            v-html="currentArticle.articleBody"
                        >

                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'ArticlesPreview',
  props: {
    value: {
      type: Boolean,
      require: true
    },
    currentArticle: {
      type: Object,
      require: true
    }
  },
  data () {
    return {

    }
  },
  methods: {
    handleClose () {
      this.$emit('input', false)
    }
  }
}
</script>

<style scoped lang='scss'>
span {
    margin-right: 10px;
}
.articleBody {
    background: #f5f5f5;
    border-top: 1px dashed #ccc;
    padding-left: 15px;
}
</style>
